<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>极客园</title>
    <style>
      .container {
        display: flex;
        margin: 0 auto;
        justify-content: space-around;
        align-items: center;
      }
      .container .left,
      .container .right {
        position: relative;
        /* transform: scale(0.8); */
      }
      .init,
      .break {
        font-size: 16px;
        text-align: center;
        color: #999;
        padding: 3px 0;
      }
      body {
        background-color: #f4f4f4;
      }
      .left img {
        margin-top: 0px;
      }
      .left .slide {
        animation: toTop linear 1s;
      }
      .toBig {
        animation: toBig linear 0.5s;
      }
      .codeview {
        position: absolute;
        width: 362px;
        height: 640px;
        background-color: #fff;
        left: 24px;
        top: 99px;
      }
      #code_message {
        overflow: auto;
      }
      #code_message .message {
        margin: 20px;
        background-color: #f3f3f3;
        padding: 10px;
        line-height: 30px;
        border-radius: 20px;
      }
      .back {
        width: 100%;
        height: 100vh;
        background: pink;
        position: fixed;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .back .btn {
        width: 280px;
        height: 80px;
        user-select: none;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        line-height: 80px;
        font-size: 30px;
        color: #fff;
        background-color: #409eff;
      }
      .back .title {
        margin-bottom: 200px;
        font-size: 60px;
      }
      .navbar {
        height: 100vh;
        width: 200px;
        background-color: #f4f4f4;
        left: 0;
        top: 0;
        position: fixed;
        padding-top: 20px;
      }
      .navbar .item {
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        cursor: pointer;
        user-select: none;
        /* border-bottom: 1px solid #666; */
      }
      .navbar .item:hover {
        color: blue;
      }
      .navbar a {
        text-decoration: none;
        color: rgb(233, 33, 66);
      }
      a:hover {
        color: blue;
      }
      .sendcode {
        position: absolute;
        right: 100px;
        top: 200px;
        width: 280px;
        height: 60px;
        user-select: none;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        line-height: 60px;
        font-size: 20px;
        color: #fff;
        background-color: #409eff;
      }
      @keyframes toTop {
        0% {
          margin-top: 100px;
        }
        100% {
          margin-top: 0;
        }
      }
      @keyframes toBig {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <!-- 用作新消息提示 -->
    <audio
      id="msgVoice"
      src="./audio/message.mp3"
      autoplay
      style="display: none"
    ></audio>
    <button id="btnVoice" onclick="playVoice()" style="opacity: 0"></button>
    <div class="title"></div>
    <div class="navbar">
      <!-- <div class="item">移动项目演示</div> -->
      <div class="item"><a target="_blank" href="/api.html">api文档</a></div>
      <!-- <div class="item">git仓库</div> -->
      <!-- <div class="item">课程讲义</div> -->
    </div>
    <div class="container">
      <div class="left">
        <!-- 短信验证平台 -->
        <div id="code_message" class="codeview"></div>
        <img id="left_img" src="./images/phone.jpg" alt="" />
      </div>
      <!-- <div class="right">
            <div class="codeview">
                  <iframe src="/code/index.html" width="100%" height="100%" frameborder="0"></iframe>
            </div>
            <img src="./images/phone.jpg" alt="">
        </div> -->
    </div>
    <div onclick="sendCode()" class="sendcode">测试发送短信验证码</div>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="/js/socket.io.min.js"></script>
    <script>
      var msgDom = $('#code_message'); // 消息列表
      var msgList = []; // 消息列表
      var socket = null; // 初始socket对象
      var initSocket = function () {
        socket = io('http://localhost:8001?key=hmlgnb', {
          transports: ['websocket'],
        }); // 创建连接 创建连接写入秘钥
        socket.on('connect', function () {
          console.log('连接建立成功');
          addMesasge('init', '与服务器建立通讯！');
        });
        socket.on('disconnect', function () {
          console.log('连接断开');
          addMesasge('break', '与服务器通讯中断！');
        });
        socket.on('message', function (data) {
          addMesasge('message', data);
          renderList();
          $('#btnVoice').trigger('click');
        });
      };
      // 添加内容到消息区
      var addMesasge = function (type, message) {
        msgList.push({ type, message });
        renderList();
      };
      // 渲染list到消息列表
      var renderList = function () {
        var listStr = msgList.map(function (item) {
          if (item.type === 'init') {
            return `<div class='init'>${item.message}</div>`;
          } else if (item.type === 'break') {
            return `<div class='break'>${item.message}</div>`;
          } else if (item.type === 'message') {
            return `<div class='message'>${item.message}</div>`;
          }
        });
        var height = msgDom[0].scrollHeight;
        msgDom.html(listStr.join(''));
        msgDom[0].scrollTop = height; // 滚动到底部
      };

      var copyValue = function (dom) {
        let transfer = document.createElement('input');
        document.body.appendChild(transfer);
        transfer.value = dom.innerText; // 这里表示想要复制的内容
        transfer.focus();
        transfer.select();
        //  transfer.style.display = 'none'
        document.execCommand('Copy');
        transfer.remove();
      };
      var play = function () {
        $('#btnVoice').trigger('click');
      };
      var playVoice = function () {
        $('#msgVoice')[0].play();
      };
      var welcome = function () {
        var template = `<div class='back'> 
                    <div class='title'>欢迎使用演示系统</div> 
                    <div class='btn' onclick="closewelcome()">查看演示</div>
            </div>`;
        $('body').append(template);
        $('#code_message').hide();
      };
      function closewelcome() {
        $('.back').hide();
        $('#left_img').addClass('slide');
        play();
        setTimeout(() => {
          $('#code_message').show();
          $('#code_message').addClass('toBig');
        }, 1000);
      }
      // 发送验证码
      function sendCode() {
        $.ajax({
          url: `/v1_0/sms/codes/13811111111`,
          success: function (data) {},
          error: function ({ responseJSON }) {
            alert(responseJSON.message);
          },
        });
      }
      initSocket(); // 初始化websocket
      welcome();
    </script>
  </body>
</html>
